<section>
  <div class="row">
    <h5>basic</h5>
    <div class="col-md-6">
      <div class="devui-input-group devui-dropdown-origin">
        <input
          class="devui-input devui-form-control"
          placeholder="y/MM/dd"
          autocomplete="off"
          dTimePicker
          [(ngModel)]="selectedTime1"
          (click)="timePicker1.toggle()"
          #timePicker1="timePicker"
          (selectedTimeChange)="timeChange($event)"
          (ngModelChange)="modelChange($event)"
          [timePickerWidth]="300"
        />
        <div *ngIf="selectedTime1" class="devui-input-group-addon close-icon-wrapper" (click)="timePicker1.clearAll()">
          <i class="icon icon-close"></i>
        </div>
        <div class="devui-input-group-addon" (click)="timePicker1.toggle()">
          <i class="icon icon-time"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <h5>default open</h5>
    <div class="col-md-6">
      <div class="devui-input-group devui-dropdown-origin">
        <input
          class="devui-input devui-form-control"
          placeholder="y/MM/dd"
          autocomplete="off"
          dTimePicker
          [(ngModel)]="selectedTime2"
          (click)="timePicker2.toggle()"
          #timePicker2="timePicker"
          (selectedTimeChange)="timeChange($event)"
          (ngModelChange)="modelChange($event)"
          [autoOpen]="true"
        />
        <div *ngIf="selectedTime2" class="devui-input-group-addon close-icon-wrapper" (click)="timePicker2.clearAll()">
          <i class="icon icon-close"></i>
        </div>
        <div class="devui-input-group-addon" (click)="timePicker2.toggle()">
          <i class="icon icon-time"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <h5>disabled</h5>
    <div class="col-md-6">
      <div class="devui-input-group devui-dropdown-origin devui-disabled">
        <input
          class="devui-input devui-form-control"
          placeholder="y/MM/dd"
          autocomplete="off"
          dTimePicker
          [(ngModel)]="selectedTime3"
          (click)="timePicker3.toggle()"
          #timePicker3="timePicker"
          (selectedTimeChange)="timeChange($event)"
          (ngModelChange)="modelChange($event)"
          [disabled]="true"
          disabled
        />
        <div *ngIf="selectedTime3" class="devui-input-group-addon close-icon-wrapper" (click)="timePicker3.clearAll()">
          <i class="icon icon-close"></i>
        </div>
        <div class="devui-input-group-addon" (click)="timePicker3.toggle()">
          <i class="icon icon-time"></i>
        </div>
      </div>
    </div>
  </div>
</section>
